Виджеты. Color Border

➡️ Скачать презентацию. Flutter Color Border
➡️ Ссылка на репозиторий с кодом этого урока

Виджеты для работы c цветом

• В папку widgets добавим файл colors_widget.dart
• В файле создадим виджет ColorsExample()
• В файле main.dart не забудьте передать ColorsExample() в body 

Выбор готового цвета

• Использование готового набора цветовых констант через класс Colors
• Пишем Colors ставим точку и выбираем из списка нужный цвет

Файл colors_widget.dart

class ColorsExample extends StatelessWidget {
  final double width, height;

  const ColorsExample({
    super.key, this.width = 240, this.height = 320,
  });

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: width,
        height: height,
        decoration: BoxDecoration(
          // Использование готового цвета 
          // с помощью констант
          color: Colors.amber,
        ),
      ),
    );
  }
}

                  

Добавляем виджет в main.dart чтобы он отобразился на экране!

Файл main.dart

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Flutter Course",
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
      ),
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true, 
          title: const Text("Виджет Image"),
        ),
        body: ColorsExample(), // 🡰 Сюда
      ),
    );
  }
}
                  

Основной цвет, акцентный цвет и их оттенки

MaterialColor

Определяет как один цвет, так и образец цвета с 10 оттенками цвета.
Оттенки цвета обозначены индексом. Чем больше индекс, тем темнее цвет.
Имеется 10 допустимых индексов: 50, 100, 200, ..., 900

MaterialAccentColor

Определяет как один акцентный цвет, так и образец из 4 оттенков акцентного цвета.
Существует четыре индекса для акцентного цвета: 100, 200, 400 и 700

Например, воспользуемся возможностью языка Dart, чтобы сгенерировать список из элементов, и выведем на экран несколько контейнеров с цветом фона разного оттенка.

Файл colors_widget.dart

class ColorsExample2 extends StatelessWidget {
  const ColorsExample2({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      // Создать список из 10 элементов
      children: List.generate(10, (index) {
        return Expanded(
          child: Container(
            alignment: Alignment.center,
            width: double.infinity,
            color: Colors.amber[index * 100],
            child: Text("amber[${index * 100}]"),
          ),
        );
      }),
    );
  }
}

                  

Как работает этот код выше?

Точная установка цвета

Чтобы установить более точный цвет которого нет в списке констант, можно воспользоваться классом Color и вызвать один из конструкторов

Color класс для установки своего значения цвета

Color это неизменяемое 32-битное значение цвета в формате ARGB.
ARGB = Alpha Red Green Blue

32 бита это 4 байта (от 0 до +4 294 967 295 значений)
1 байт это 8 бит
8 бит это 255 значений

ARGB = (255, 255, 255, 255)

Например, цвет amber - 0xFFFFC107

FF - прозрачность, FF - red, C1 - green, 07 - blue

0xFF → он полностью непрозрачен
0xFF → значение красного канала (255)
0xС1 → значение зеленого канала (193)
0x07 → значение синего канала (7)

Конструкторы

Color c = const Color(0xFFFFC107);
Color c = const Color.fromARGB(0xFF, 0xFF, 0xC1, 0x07);
Color c = const Color.fromARGB(255, 255, 193, 7);
Color c = const Color.fromRGBO(255, 193, 7, 1.0);

                  

Файл colors_widget.dart

class ColorsExample extends StatelessWidget {
  final double width, height;
  const ColorsExample({super.key, this.width=240, this.height=320});

  @override
  Widget build(BuildContext context) {
    
    // Различные варианты определения одного и того же цвета
    Color color1 = const Color(0xFFFFC107);
    Color color2 = const Color.fromARGB(0xFF, 0xFF, 0xC1, 0x07);
    Color color3 = const Color.fromARGB(255, 255, 193, 7);
    Color color4 = const Color.fromRGBO(255, 193, 7, 1.0);
    
    // Добавление прозрачности (альфа-канал)
    Color color5 = Colors.amber.withAlpha(128);

    return Scaffold(
      appBar: AppBar(title: const Text('Работа с цветом')),
      body: Center(
        child: Container(
          width: width,
          height: height,
          decoration: BoxDecoration(
            color: color1, // Указали цвет через переменную color1
          ),
        ),
      ),
    );
  }
}

                  

VSCode палитра

Если для работы используете VS Code то можно навести на квадратик с цветом и выбрать цвет из палитры, очень удобный плагин.

Для черного и белого цвета, заранее созданы значения, указывающие на "прозрачность"
Например white24 это белый цвет с 24% прозрачности

color: Colors.red[500] // Тоже самое что и Colors.red.shade500
color: Colors.transparent // Невидимка (Цвета нет)

                  

Также есть возможность ещё вызвать методы которые устанавливают конкретные значения для прозрачности, alpha канала, red, green, blue:

.withAlpha(200)   // Прозрачность от 0 до 255
.withRed(124)
.withGreen(124)
.withBlue(124)
.withValues()

                  

Посмотреть все образцы цветов и оттенков можно прямо в документации
https://api.flutter.dev/flutter/material/Colors-class.html

 Git + GitFlic

Делаем add commit и push

Через VSCode нажимаем Publish Branch

git add .
git commit -m "Изучаем работы с цветом"
git push origin 3.7-Виджеты-Color-Border